<template>
<div class="common-layout">
    <header>
        <el-button @click="goback" icon="el-icon-back"></el-button>
        <p> {{ titles }} </p>
        <el-button @click="close" icon="el-icon-close"></el-button>
    </header>
    <div class="common-container">
        <nuxt />
    </div>
    <footer>
         <div>
            <p class="text"></p>
        </div>
    </footer>
</div>
</template>

<script>
export default {
    data() {
        return {
            titles: ''
        }
    },
    methods: {
        goback() {
            this.$router.back()
        },
        close() {
            this.$router.back()
        }
    }
}
</script>

<style scoped>

.common-layout {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
}

.common-layout header {
    height: 75px;
    padding: 0 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid lightgray;
}

.common-layout header a {
    height: 34px;
}

.common-layout footer {
    height: 70px;
    text-align: center;
    border-top: 1px solid lightgray;
}

.common-layout footer p.text {
    color: #a1a9b2;
    padding: 16px 0px;
}

.common-container {
    padding: 1em 2em;
    display: flex;
    flex-direction: column;;
    /* justify-content: center; */
    flex-grow: 1;
    /* background: url(https://static.xinrenxinshi.com/sso/body-bg.png) repeat repeat #f5f7fa; */
}

header .el-button {
    height:75px;
    width:75px;
    padding: 0px;
    border: none;
}

header >>> p {
    font-size: 22px;
    color: #555;
}

header .el-button i {
    line-height: 2em;
}
</style>
